<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>行情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script type="text/javascript" src="../js/lib/remtest.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/liveapp.css" />
		<script type="text/javascript" src="../js/iconfont.js"></script>
		<style>
			.iconzs {
				width: 0.8em;
				height: 0.8em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			
			body {
				background: #FFFFFF;
			}
			
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			#hqtit {
				padding: 0.1rem 15px;
				font-size: 0.2rem;
				color: #888888;
				background: #EEEEEE;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: #fed700;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border-bottom: 0px;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item {
				height: 550px;
			}
			/*行情*/
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #fed700;
			}
			
			.hqtable {
				width: 100%;
				text-align: center;
			}
			
			.hqp2 {
				padding-left: 0px;
			}
			
			.hqp {
				font-size: 18px;
			}
			
			.hqp.r {
				color: #ee0d0d;
			}
			
			.hqp.g {
				color: #189715;
			}
			
			.mui-slider-indicator {
				position: absolute;
				bottom: 8px;
				width: 100%;
				text-align: center;
				background: #ffff;
			}
			
			.left {
				float: left;
			}
			
			.mui-card .mui-table-view {
				margin-bottom: 0;
				border-top: 0;
				border-bottom: 0;
				border-radius: 0px;
			}
			
			.mui-card {
				font-size: 14px;
				position: relative;
				overflow: hidden;
				margin: 0px;
				border-radius: 0px;
				background-color: rgba(0, 0, 0, 0);
				background-clip: padding-box;
				box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
				margin-bottom: 10px;
			}
			
			.mui-table-view-cell {
				position: relative;
				overflow: hidden;
				padding: 0.18rem 0.22rem !important;
			}
			
			.hqtable .hqp1 h4 {
				font-size: 0.24rem;
			}
			
			.hqtable .hqp3 {
				font-size: 0.24rem;
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">自选</h1>
		</header>-->
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
				<div id="hqtit">
					<table class="hqtable">
						<tr>
							<td class="hqp1 mui-col-xs-4">品种</td>
							<td class="hqp3 mui-col-xs-4 redfont">最新价格</td>
							<td class="hqp4 mui-col-xs-2 redfont">置顶</td>
							<td class="hqp5 mui-col-xs-2 redfont">拖动</td>
						</tr>
					</table>
				</div>

				<div class="mui-slider-group">
					<div class="mui-card">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" style="padding: 0.1rem 0.22rem;">
								<table class="hqtable">
									<tr>

										<td class="hqp4 mui-col-xs-12 hqp" style="text-align: left; font-size: 0.24rem;">自选</td>

									</tr>
								</table>
							</li>

						</ul>

					</div>

					<div class="mui-card">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<table class="hqtable">
									<tr>

										<td class="hqp4 mui-col-xs-12 hqp" style="text-align: left;">上海黄金</td>

									</tr>
								</table>
							</li>

						</ul>

					</div>

					<div class="mui-card">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<table class="hqtable">
									<tr>

										<td class="hqp4 mui-col-xs-12 hqp" style="text-align: left;">国际黄金</td>

									</tr>
								</table>
							</li>

						</ul>

					</div>
					<div class="mui-card">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<table class="hqtable">
									<tr>

										<td class="hqp4 mui-col-xs-12 hqp" style="text-align: left;">美元</td>

									</tr>
								</table>
							</li>

						</ul>

					</div>
				</div>

			</div>

		</div>
		<!--模板-->
		<div id="model" style="display: none;">
			<li class="mui-table-view-cell">

				<table class="hqtable">
					<tr>
						<td class="hqp1 mui-col-xs-2">
							<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-tianjia"></use>
								</svg>
		        			 </span>
						</td>
						<td class="hqp1 mui-col-xs-2">
							<h4>${productname}</h4>
							<p class="hqp2">${productcode}</p>
						</td>

						<td class="hqp3 mui-col-xs-4 hqp r">${newprice}</td>
						<td class="hqp3 mui-col-xs-2 hqp">
							<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href=""></use>
								</svg>
		                    </span>
						</td>
						<td class="hqp4 mui-col-xs-2 hqp">
							<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href=""></use>
								</svg>
		                    </span>
						</td>

					</tr>
				</table>

			</li>

		</div>

		<div id="model2" style="display: none;">
			<li class="mui-table-view-cell">

				<table class="hqtable">
					<tr>
						<td class="hqp1 mui-col-xs-2">
							<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-shanchu"></use>
								</svg>
		                   	 </span>
						</td>
						<td class="hqp1 mui-col-xs-2">
							<h4>${productname}</h4>
							<p class="hqp2">${productcode}</p>
						</td>

						<td class="hqp3 mui-col-xs-4 hqp r">${newprice}</td>
						<td class="hqp3 mui-col-xs-2 hqp">
							<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-zhiding"></use>
								</svg>
		                    </span>
						</td>
						<td class="hqp4 mui-col-xs-2 hqp">
							<span class="mui-icon">	                    	
		                    	<svg class="iconzs" >
 									 <use xlink:href="#icon-tuodong"></use>
								</svg>
		                    </span>
						</td>

					</tr>
				</table>

			</li>

		</div>
		<!--模板end-->
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/lib/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../js/lib/template.js"></script>
		<script type="text/javascript" src="../js/lodash/lodash.min.js"></script>
		<script type="text/javascript" src="../js/Common.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});

			})(mui);

			$(function() {
				GetList1();

			});
			var t = document.getElementById('model').innerHTML;
			var t2 = document.getElementById('model2').innerHTML;

			/*自选*/
			function GetList1() {

				$.get('http://liveapi.99990158.com/ajax/getmarketlistdata.aspx', {}, function(data) {
					var obj = JSON.parse(data);
					/*自选*/
					CreateT(obj.data.list, 0);

					var data1 = _.filter(obj.data.list, function(n) {
						return n.productname.indexOf('美元') < 0 && n.productname.indexOf('伦敦') < 0;
					});
					/*上海黄金*/
					CreateT(data1, 1);

					var data2 = _.filter(obj.data.list, function(n) {
						return n.productname.indexOf('伦敦') >= 0;
					});
					/*国际黄金*/
					CreateT(data2, 2);

					var data3 = _.filter(obj.data.list, function(n) {
						return n.productname.indexOf('美元') >= 0;
					});
					/*美元*/
					CreateT(data3, 3);

					SetAction();

				});
			}

			function SetAction() {
				mui('.mui-card').on('tap','span',function(e){
					if(isLogin()) {
							$.post('http://app.99990158.com/UserMarket/AddMark', {
								UserId: GetLoginUserInfo().LoginId,
								Code: 'Code',
								Name: 'Name',
								Remark: '自选',
								UserIp: 'UserIp'
							}, function(rps) {});
						} else {
							outSet('请登陆');
						}
				});

				 
			}

			function CreateT(list, index) {
				var str = t;
				if(index == 0)
					str = t2;
				else
					str = t;
				$('.mui-card').eq(index).each(function(index, elm) {

					var html = tmpl(str, list, tmpl_count(list));

					var top = $(elm).find('.mui-table-view').html();
					$(elm).find('.mui-table-view').html(top + html);
				});

			}
		</script>

	</body>

</html>